<template>
    <el-dialog title="物资入库" :visible.sync="visible">
      <el-form :model="form">
        <el-form-item label="物资名称">
          <el-input v-model="form.material_name"></el-input>
        </el-form-item>
        <el-form-item label="入库数量">
          <el-input v-model="form.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item v-for="index in form.quantity" :key="index" label="设备编码">
          <el-input v-model="form.device_codes[index - 1]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  export default {
    props: ['visible'],
    data() {
      return {
        form: {
          material_name: '',
          quantity: 0,
          device_codes: []
        }
      };
    },
    watch: {
      'form.quantity'(newQuantity) {
        this.form.device_codes = new Array(newQuantity).fill('');
      }
    },
    methods: {
      async handleSubmit() {
        try {
          await this.$emit('submit', this.form);
          this.visible = false;
          this.$message.success('入库成功');
        } catch (error) {
          this.$message.error('入库失败');
        }
      }
    }
  };
  </script>
  